vue多级嵌套组件传参

$attrs

$attrs概念： 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

参考文档

$listeners

$listeners概念：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
参考文档链接描述

inheritAttrs

inheritAttrs概念：默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效，且可以通过 v-bind 显性的绑定到非根元素上。
注意：这个选项不影响 class 和 style 绑定。
参考文档

主要解决的问题

vue多级组件的传参：A-B-C-D 四个组件嵌套，参数需要从A->D 或者A-C，D组件想要改变A组件的内容等。

A组件

<template>
    <div>
       
        <BComponent
        :B="B"
        :C="C"
        :D="D"
        @DClick= "DClick"
        @CClick="CClick"/>
    </div>
</template>

<script>
    import BComponent from "./BComponent.vue"
    export default {
        components:{
            BComponent
        },
        data() {
            return {
                B:"Hello, B",
                C:"Hello,C",
                D:"Hello,D"
            }
        },
        mounted() {},
        methods: {
            CClick(){
                alert("子组件C操作A组件成功")
            },
            DClick(){
                alert("子组件D操作A组件成功")
            }
        },
    }
</script>
<style scoped>

</style>

B组件

<template>
    <div>
        B组件
        <p>B:{{B}}</p>
        <p>attrs:{{$attrs}}</p>

         <CComponent v-bind="$attrs" v-on="$listeners" @DClick="DClick" />
    </div>
</template>

<script>
    import CComponent from "./CComponent.vue"
    export default {
        components: {
            CComponent
        },
        props:["B"],
        inheritAttrs:false,
        data() {
            return {}
        },
        mounted() {
        },
        methods: {
            DClick(){
                alert("D操作B成功")
            }
        },
    }
</script>
<style scoped>

</style>

C组件

<template>
    <div>
        C组件
        <p>C:{{C}}</p>
        <button @click="startUpRocket">我要发射火箭</button>
        <DComponent v-bind="$attrs" v-on="$listeners"  @DClick="DClick" />
    </div>
</template>

<script>
    import DComponent from "./DComponent.vue"
    export default {
        components:{
            DComponent
        },
        data() {
            return {}
        },
        props: ["C"],
        inheritAttrs: false,
        mounted() {},
        methods: {
            startUpRocket(){
                this.$emit("CClick");
            },
            DClick(){
                alert("D操作C成功")
            }
        },
    }
</script>
<style scoped>

</style>

D组件

<template>
    <div>
        D组件
        <p>D:{{D}}</p>
         <button @click="DClick">我要操作父组件</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        },
        props:["D"],
        mounted() {},
        methods: {
            DClick(){
                this.$emit("DClick");
            }
        },
    }
</script>
<style scoped>

</style>